<template>
  <div>
    <p>动态组件:is属性</p>
    <keep-alive>
      <div :is="comName"></div>
    </keep-alive>
    <hr>
    <input type="text" v-model="comName">
    <hr>
    <ul>
      <li is="lis"></li>
    </ul>
    <button @click="comName='login'">去登录</button>
    <button @click="comName='reg'">去注册</button>
    <button @click="comName='son3'">去son3</button>
    <button @click="comName='son4'">去son4</button>
    <button @click="comName='son5'">去son5</button>
    <hr>
    <button @click="toggle">jq的切换</button>
    <div class="div1"></div>
  </div>
</template>

<script>
import son3 from './Son3.vue'
import son4 from './Son4.vue'
import son5 from './Son5.vue'
import lis from './Lis.vue'
import login from './Login.vue'
import reg from './Reg.vue'
// 导入jq的代码
import $ from 'jquery'
export default {
  data() {
    return {
      comName: 'son3'
    }
  },
  components: {
    son3,
    son4,
    son5,
    lis,
    login,
    reg
  },
  methods: {
    toggle() {
      // 使用jq中的方法
      $('.div1').slideToggle(2000);
    }
  }
}
</script>

<style>
  .div1 {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>